<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="x5-fullscreen" content="true">
    <meta name="full-screen" content="yes">
    <title>排行榜</title>
    <link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/base.css?v=14" />
    <link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/mod.css?v=14" />
    <link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/run.css?v=115" />
    <script src="{$staticHost}/static/js/iscroll.js"></script>
    <script src="{$staticHost}/static/js/mod.js"></script>
    <script src="{$staticHost}/static/js/js.js"></script>
    <script src="{$staticHost}/static/js/jquery.min.js"></script>
    </head>
    <style type="text/css">
      .paome-rank {
        background: #fff;
      }
      .paome-rank img {
        width: 32px;
        height: 32px;
        display: block;
        margin: 0 5px;
      }
      .paome-rank span {
        display: block;
        text-align: center;
        font-size: 9px;
        position: relative;
      }
      .paome-rank span.up {
        color: #f11b36;
      }
      .paome-rank span.down {
        color: #4da924;
      }
      .paome-rank b {
        display: block;
        font-size: 16px;
        color: #4f4f4f;
      }
      .paome-rank li:nth-child(1) p{font-size: 14px;}
      .paome-rank li{
        padding: 15px 10px;
        border-top: 1px solid #dadad8;
        display: -moz-box;
        display: -webkit-box;
        display: box;
        -webkit-box-align: center;
        -webkit-box-pack: center;
        -o-box-align: center;
        -o-box-pack: center;
        -moz-box-align: center;
        -moz-box-pack: center;
        box-align: center;
        box-pack: center;
        font-size: 14px;
      }
      .paome-rank span:nth-child(1) {
        width: 60px;
      }
      .paome-rank span:last-child,
      .paome-rank li:nth-child(1) span:last-child{
        width: 80px;
        text-align: right;
        font-size: 16px;
        font-weight: 800;
      }
      .paome-rank p {
        -moz-box-flex: 1;
        -webkit-box-flex: 1;
        box-flex: 1;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 10%;
      }
      .paome-rank .me {
        background: #d3f3fa;
      }
    </style>
<body onload="loaded()" class="pb50">
  <nav class="gray-nav" style="background:#fff"></nav>
  {template 'paome/run/tier-energy'}
  <div class="search">
    <a>
      <img src="/static/images/icon/search.png"/>
      <input style="width: 135px;" id="sq" type="text" name="sq" placeholder="输入战队名称查看排名">
      <span class="sbt fr plr5">搜索</span>
    </a>
  </div>
  <div class="round-tab">
    <a id="all-zlc" class="rank_tab">总里程榜</a>
    <a id="all-pace" class="rank_tab">配速榜</a>
    <a id="all-moods" class="rank_tab">人气榜</a>
    <a id="all-member" class="rank_tab">全员跑量榜</a>
  </div>
  <div id="wrapper" style="top:145px;">
    <div id="list" class="#scroller">
      <section class="all-zlc">
        <section id="empty" class="empty-box no">
          <div>
            <img src="http://irun.hupu.com/static/images/bg/image1_03-min.png" >
            <p class="plr20">
            快快去备战训练为竞赛做准备吧！
            竞赛开始时再来一探究竟谁是高手吧！
            </p>
          </div>
        </section>
        <div class="p10 mileage-title dn">
          <span>战队</span>
          <span class="fr">总里程</span>
        </div>
        <ul class="paome-rank top"></ul>
        <ul class="paome-rank list"></ul>
        <div class="stop dn">－－－止步于预选赛的战队－－－</div>
        <ul class="paome-rank over pb50 dn"></ul>
      </section>
      <!-- 总里程榜 -->

      <section class="all-pace" style="display: none;">
        <section id="empty" class="empty-box no">
          <div>
            <img src="http://irun.hupu.com/static/images/bg/image1_03-min.png" >
            <p class="plr20">
            快快去备战训练为竞赛做准备吧！
            竞赛开始时再来一探究竟谁是高手吧！
            </p>
          </div>
        </section>
        <div class="p10 mileage-title dn">
          <span>战队</span>
          <span class="fr">配速</span>
        </div>
        <ul class="paome-rank top"></ul>
        <ul class="paome-rank list"></ul>
        <div class="stop dn">－－－止步于预选赛的战队－－－</div>
        <ul class="paome-rank over pb50 dn"></ul>
      </section>
      <!-- 配速榜 -->

      <section class="all-moods" style="display: none;">
        <section id="empty" class="empty-box no">
          <div>
            <img src="http://irun.hupu.com/static/images/bg/image1_03-min.png" >
            <p class="plr20">
            快快去备战训练为竞赛做准备吧！
            竞赛开始时再来一探究竟谁是高手吧！
            </p>
          </div>
        </section>
        <div class="p10 mileage-title dn">
          <span>战队</span>
          <span class="fr">人气(赞+正能量)</span>
        </div>
        <ul class="paome-rank top"></ul>
        <ul class="paome-rank list"></ul>
        <div class="stop dn">－－－止步于预选赛的战队－－－</div>
        <ul class="paome-rank over pb50 dn"></ul>
      </section>
      <!-- 人气榜 -->

      <section class="all-member" style="display: none;">
        <section id="empty" class="empty-box no">
          <div>
            <img src="http://irun.hupu.com/static/images/bg/image1_03-min.png" >
            <p class="plr20">
            快快去备战训练为竞赛做准备吧！
            竞赛开始时再来一探究竟谁是高手吧！
            </p>
          </div>
        </section>
        <div class="p10 member-title clearfix">
          <span>成员昵称</span>
          <span class="fr">累计里程</span>
          <span class="fr">所属</span>

        </div>
        <ul class="paome-rank top"></ul>
        <ul class="paome-rank list"></ul>
        <div class="stop dn">－－－止步于预选赛的战队－－－</div>
        <ul class="paome-rank over pb50 dn"></ul>
      </section>
      <!-- 全员跑量榜 -->

  </div>

  <nav class="homenav">
    <a href="paomeHome"><i class="iconfont icon-zhuye"></i>首 页</a>
    <a class="on" href="paomeRank"><i class="iconfont icon-paihangbang"></i> 排行榜</a>
    <a href="paoLobby"><i class="iconfont icon-dating"></i>大 厅</a>
     <a href="meCenter">
       <i class="iconfont icon-wode">
           {if $msgNoReadNum>0}
            <sub id="nav-news">●</sub>
           {/if}
        </i>
        我的
    </a>
  </nav>
  <!-- 主导航 -->
</body>

<script id="gray-nav_tpl" type="text/html">
<% for(var i in roundList) { %>
<a<% if(roundList[i].isCurrent * 1 == 1) { %> class="on"<% } %> data-rid="<%=roundList[i].roundId%>"><%=roundList[i].title%></a>
<% } %>
</script>

<script id="all-zlc_tpl" type="text/html">
<% for(var i = 0; i < list.length; i++) { %>
<li<% if(isMe != undefined && isMe == 1) { %> class="me"<% } %>>
  
    <span<% if(list[i].rankChangeInfo.num * 1 < 0) { %> class="down"<% } else if(list[i].rankChangeInfo.num * 1 > 0) { %> class="up"<% } %>>
      <b><% if(!list[i].rank) { %>-<% } else { %><%=list[i].rank%><% } %></b>
      <% if(list[i].rankChangeInfo) { %>
      <%=list[i].rankChangeInfo.desc%>
      <% } %>
    </span>
    <a href="clubDetailNo?clubId=<%=list[i].clubId %>">
    <img src="<%=list[i].image%>?imageView2/2/w/128"/>
    </a>
    <p><%=list[i].clubName%></p>
    <span><%=list[i].rankValue%></span>
  
</li>
<% } %>
</script>

<script id="all-member_tpl" type="text/html">
<% for(var i = 0; i < list.length; i++) { %>
<li<% if(isMe != undefined && isMe == 1) { %> class="me"<% } %>>
  <span<% if(list[i].rankChangeInfo.num * 1 < 0) { %> class="down"<% } else if(list[i].rankChangeInfo.num * 1 > 0) { %> class="up"<% } %>>
    <b><% if(!list[i].rank) { %>-<% } else { %><%=list[i].rank%><% } %></b>
    <% if(list[i].rankChangeInfo) { %>
    <%=list[i].rankChangeInfo.desc%>
    <% } %>
  </span>
  <img class="user rounde16" data-id="<%=list[i].uid%>" src="<%=list[i].header%>"/>
  <p><%=list[i].userName%></p>
  <a href="clubDetailNo?clubId=<%=list[i].clubId%>">
    <img src="<%=list[i].image%>?imageView2/2/w/128"/>
  </a>
  <span><%=list[i].rankValue%></span>
</li>
<% } %>
</script>

<script type="text/javascript">
var myScroll;
function loaded () {
  myScroll = new IScroll('#wrapper', { bounceEasing: 'elastic', bounceTime: 100 });
}

var currentRoundId = '',
    currentMaxRoundId = '',
    rankType = '',
    sq = '';

$(function(){
  // RoundInfo
  getPaomeApi('get', '/paome_webIndex/getPaomeRoundListApi', {}, renderRoundInfo);

  $('.sbt').click(function(){
    sq = $.trim($('#sq').val());
    $('#list .paome-rank li').remove();
    showRank();
  });
});

function renderRoundInfo(data){
  for(var k in data.roundList) {
    if(data.roundList[k].isCurrent * 1 == 1) {
      currentMaxRoundId = k * 1;
      currentRoundId = !currentRoundId ? currentMaxRoundId : currentRoundId;
    }
  }
  var html = template('gray-nav_tpl', data);
  $('.gray-nav').html(html);
  if($(.gray-nav a:last-child).click()){
    window.location.href='paomeRank'
  }
  $('.gray-nav a').click(function(){
    var rid = $(this).attr('data-rid');
    if(rid > currentMaxRoundId) {
      return;
    }
    $('.gray-nav a').each(function(){
      if($(this).attr('data-rid') == rid) {
        $(this).addClass('on');
        currentRoundId = rid;
        $('#all-zlc').click();
      } else {
        $(this).removeClass('on');
      }
    });
  });

  $('.rank_tab').click(function(){
    var tab_class = $(this).attr('id');
    $('.rank_tab').each(function(){
      if($(this).attr('id') == tab_class) {
        $(this).addClass('on');
      } else {
        $(this).removeClass('on');
      }
    });
    $('#wrapper section').each(function(){
      if($(this).hasClass(tab_class)) {
        $(this).show();
        showRank(tab_class);
      } else {
        $(this).hide();
      }
    });
  });

  $('#all-zlc').click();
}

function showRank(tab) {
  var rankTypes = {
    'all-zlc': 1,
    'all-pace': 5,
    'all-moods': 10,
    'all-member': 15
  };

  if(!tab && rankType) {
    tab = rankType;
  }

  if(rankTypes[tab] == undefined) {
    return;
  } else {
    rankType = tab;
  }

  console.log(currentRoundId);

  var param = {'roundId': currentRoundId, 'typeWd': rankTypes[tab], 'clubName': sq};
  getPaomeApi('get', '/paome_webIndex/getRankForH5', param, renderRank);
}

function renderRank(data) {
  if(data.list != undefined) {

    var rank = {'list': []};
    var tpl = rankType == 'all-member' ? 'all-member_tpl' : 'all-zlc_tpl';
    var html = '';

    $('.' + rankType + ' ul').hide();
    $('.' + rankType + ' .stop').hide();
    $('.' + rankType + ' .empty-box').hide();

    if(rankType == 'all-zlc' || rankType == 'all-member') {
      for(var i in data.list) {
        if(i == 'topRankInfo' && data.list.topRankInfo) {
          var valueM =new Number(data.list.topRankInfo.rankValue);
          data.list.topRankInfo.rankValue = valueM.toFixed(2)+'km';
          if(data.list.topRankInfo.rankChangeInfo && data.list.topRankInfo.rankChangeInfo.desc) {
            data.list.topRankInfo.rankChangeInfo.desc = data.list.topRankInfo.rankChangeInfo.desc.replace('个名次', '');
          }
        } else if(i == 'list' || i == 'overRankList') {
          for(var j in data.list[i]) {
            var valueM = new Number(data.list[i][j].rankValue)
            data.list[i][j].rankValue = valueM.toFixed(2)+'km';
            if(data.list[i][j].rankChangeInfo && data.list[i][j].rankChangeInfo.desc) {
            data.list[i][j].rankChangeInfo.desc = data.list[i][j].rankChangeInfo.desc.replace('个名次', '');
          }
          }
        }
      }
    } else {
      for(var i in data.list) {
        if(i == 'topRankInfo' && data.list.topRankInfo) {
          if(data.list.topRankInfo.rankChangeInfo && data.list.topRankInfo.rankChangeInfo.desc) {
            data.list.topRankInfo.rankChangeInfo.desc = data.list.topRankInfo.rankChangeInfo.desc.replace('个名次', '');
          }
        } else if(i == 'list' || i == 'overRankList') {
          for(var j in data.list[i]) {
            if(data.list[i][j].rankChangeInfo && data.list[i][j].rankChangeInfo.desc) {
            data.list[i][j].rankChangeInfo.desc = data.list[i][j].rankChangeInfo.desc.replace('个名次', '');
          }
          }
        }
      }
    }

    if(data.list.topRankInfo != undefined && JSON.stringify(data.list.topRankInfo).length > 2) {
      rank.list[0] = data.list.topRankInfo;
      rank.isMe = 1;
      html = template(tpl, rank);
      $('.' + rankType + ' .top').html(html).show();
      rank.isMe = 0;
    }

    if(data.list.list != undefined && data.list.list.length > 0) {
      rank.list = data.list.list;
      html = template(tpl, rank);
      $('.' + rankType + ' .list').html(html).show();
    }

    if(data.list.overRankList != undefined && data.list.overRankList.length > 0) {
      rank.list = data.list.overRankList;
      html = template(tpl, rank);
      $('.' + rankType + ' .stop').show();
      $('.' + rankType + ' .over').html(html).show();

    }

    if(rank.list.length == 0) {

      $('.' + rankType + ' .empty-box').show();
    }else{
      $(".mileage-title").show();
    }
    ljj();
    
  }

}
$(".search").click(function(){
   $(".search a").addClass('on')
})
 $(".search input").blur(function(){
   $(".search a").removeClass('on')
   $(".search a").click()
}) 
</script>

</html>
